<template>
  <div>
    <el-card>
      <!-- 查询条件 -->
      <el-form :model="param" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <!-- 账号 -->
          <el-col :lg="8" :xl="6">
            <el-form-item label="居民姓名">
              <el-input v-model="param.residentName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 账号 -->
          <el-col :lg="8" :xl="6">
            <el-form-item label="身份证号">
              <el-input v-model="param.idCard"></el-input>
            </el-form-item>
          </el-col>
          <!-- 账号 -->
          <el-col :lg="8" :xl="6">
            <el-form-item label="签约医生">
              <el-input v-model="param.hospitalUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label-width="0px">
              <HButton type="search" @click="enquire">搜索</HButton>
              <HButton type="reset" @click="restForm">重置</HButton>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-table class="mt-20" :data="tableData" border stripe>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="residentName" label="居民姓名" align="center">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          align="center"
          :formatter="formatter3"
        >
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" align="center">
        </el-table-column>
        <el-table-column
          prop="hospitalUserName"
          label="签约医生"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="serviceStartTime"
          label="服务开始时间"
          align="center"
          :formatter="formatter1"
        >
        </el-table-column>
        <el-table-column
          prop="serviceEndTime"
          label="服务结束时间"
          align="center"
          :formatter="formatter2"
        >
        </el-table-column>
        <el-table-column
          prop="completeServiceCount"
          label="已完成数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unCompleteServiceCount"
          label="未完成数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <HButton @click="performance(scope.row)" type="update" size="mini"
              >履约</HButton
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="param.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="param.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <perExamin ref="perExamin" @transData="transData"></perExamin>
  </div>
</template>

<script>
import perExamin from "./components/Performance-examin.vue";
import { getContract } from "@/api/family_doctor/family_doctor";
export default {
  components: { perExamin },
  data() {
    return {
      total: 0,
      tableData: [],
      param: {
        page: 1,
        limit: 10,
        mechName: "",
        residentName: "",
        idCard: "",
        hospitalUserName: "",
      },
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    //搜索
    enquire() {
      this.param.page = 1;
      this.param.limit = 10;
      this.getTableData();
    },
    //重置
    restForm() {
      this.param.residentName = "";
      this.param.idCard = "";
      this.param.hospitalUserName = "";
    },
    getTableData() {
      getContract(this.param).then((res) => {
        if (res.data != null) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //履约
    performance(row) {
      this.$refs.perExamin.openDialog("履约", row);
    },
    //几页每条
    handleSizeChange(size) {
      this.param.limit = size;
      this.getTableData();
    },
    //第几页
    handleCurrentChange(page) {
      this.param.page = page;
      this.getTableData();
    },
    //供子组件调用函数
    transData() {
      this.getTableData();
    },
    formatter1(row) {
      return this.timestampToTime(row.serviceStartTime);
    },
    formatter2(row) {
      return this.timestampToTime(row.serviceEndTime);
    },
    formatter3(row) {
      return row.sex == 0 ? "女" : row.sex == 1 ? "男" : "";
    },
    //时间戳转日期
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = this.appendZero(date.getDate());
      return Y + M + D;
    },
    //补0
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
  },
};
</script>